<template>
  <div class="dashboard-container">
     <Breadcrumb  separator=">" v-if="isBreadcrumbs">
        <BreadcrumbItem to="/">学科管理</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">{{$route.query.name}}</BreadcrumbItem>
        <BreadcrumbItem>目录管理</BreadcrumbItem>
    </Breadcrumb>
    <Card>
      <Row>
        <Col span="5">
          <span style="color=#464c5bfont-size: 12px" :bold="true">目录名称</span>
          <Input v-model="page.directoryName" style="width: 190px; margin-left: 10px" />
        </Col>
        <Col span="1" style="margin-top:5px;"><span style="font-size: 14px" :bold="true">状态</span></Col>
        <Col span="3">
          <Select v-model="page.state" style="height:40px">
            <Option value="1">启用</Option>
            <Option value="2">禁用</Option>
          </Select>
        </Col>
        <Col span="11">
          <Button style="margin-left: 10px" @click="removes">清除</Button>
          <Button type="primary" style="margin-left: 10px" @click="search">搜索</Button></Col
        >
        <Col span="2">
          <Button type="text" icon="ios-arrow-round-back" @click="Returntodiscipline" v-if="isID">返回学科</Button>
        </Col>
        <Col span="2">
          <Button type="success" icon="md-create" @click="Modifythe(1)">新增学科</Button>
        </Col>
      </Row>
      <Alert show-icon>数据一共{{ page.total }}条</Alert>
      <Table stripe :columns="columns1" :data="list">
        <template slot="btn" slot-scope="{ row }">
          <Button type="text" style="color: #6b9eff" @click="prohibited(row)">{{ row.state == 0 ? '禁用' : '启用' }}</Button>
          <Button type="text" style="color: #6b9eff" @click="Modifythe(2, row)">修改</Button>
          <Button type="text" style="color: #6b9eff" @click="deletdirectory(row)">删除</Button>
        </template>
        <template slot="addDate" slot-scope="{ row }">
          {{ row.addDate | time() }}
        </template>
        <template slot="state" slot-scope="{ row }">
          {{ row.state == 1 ? '已启用' : '已禁用' }}
        </template>
      </Table>
      <Row type="flex" justify="end"> <Page :total="total" size="small" show-elevator show-sizer @on-change="changePage" /></Row>
    </Card>
    <!-- 新增弹出层 -->
    <Modal width="440" :rules="rules" v-model="modal1" :title="title" @on-ok="ok" @on-cancel="cancel">
      <Form ref="formValidate" :model="formValidate" :label-width="80">
        <FormItem label="所属学科" prop="select">
          <Select v-model="formValidate.subjectID">
            <Option v-for="item in disciplinelist" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="目录名称" prop="name">
          <Input v-model="formValidate.directoryName" placeholder=""></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import moment from 'moment'
import { list, add, remove, changeState, update } from '../../api/hmmm/directorys'
import { simple } from '../../api/hmmm/subjects'
export default {
  filters: {
    time (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  data () {
    return {
      isID: false,
      isBreadcrumbs: false,
      list: [],
      disciplinelist: [],
      model1: '',
      modal1: false,
      formValidate: {
        id: null,
        subjectID: '',
        directoryName: ''
      },
      total: 0,
      title: '',
      page: {
        page: 1,
        pagesize: 10
      },
      rules: {
        name: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      columns1: [
        {
          title: '编号',
          type: 'id',
          key: 'id'
        },
        {
          title: '所属学科',
          key: 'subjectName'
        },
        {
          title: '目录名称',
          key: 'directoryName'
        },
        {
          title: '创建者',
          key: 'username'
        },
        {
          title: '创建日期',
          key: 'addDate',
          slot: 'addDate'
        },
        {
          title: '面试题数量',
          key: 'totals'
        },
        {
          title: '状态',
          key: 'state',
          slot: 'state'
        },
        {
          title: '操作',
          slot: 'btn',
          fixed: 'right',
          width: 260
        }
      ]
    }
  },
  created () {
    this.ToobtainList()
    // console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.isID = true
    }
    if (this.$route.query.name) {
      this.isBreadcrumbs = true
    }
  },
  computed: {
    showTitle () {
      return this.formValidate.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    async getDirectory () {
      const {
        data: { counts, items }
      } = await list(this.page)
      this.page.counts = counts
      this.list123 = items
      this.total = counts
    },
    //  获取信息 渲染页面
    async ToobtainList () {
      const { data } = await list(this.page)
      this.list = data.items
      this.page.total = this.list.length
    },
    //  点击分页调动数组
    changePage (newPage) {
      this.page.page = newPage
      this.ToobtainList()
    },
    // 点击搜索
    async search () {
      const { data } = await list(this.page)
      this.list = data.items
      this.page.total = this.list.length
    },
    // 点击删除
    async deletdirectory (id) {
      try {
        await this.$confirm('此操作将永久删除该目录, 是否继续 ?')
        await remove(id)
        this.$Message.success('删除成功')
        this.ToobtainList()
      } catch (error) {
        console.log(error)
      }
    },
    // 点击禁用
    async prohibited (data) {
      data.state = data.state === 1 ? '0' : '1'
      await changeState(data).then(() => {
        this.ToobtainList()
        this.$Message.success('操作成功')
      })
    },
    //  点击修改和新增
    async Modifythe (val, row) {
      this.modal1 = true
      const { data } = await simple(this.page)
      this.disciplinelist = data
      if (val === 1) {
        this.title = '新增目录'
      } else if (val === 2) {
        this.title = '修改目录'
        this.formValidate = {
          subjectID: row.subjectID,
          directoryName: row.directoryName,
          id: row.id
        }
      }
    },
    // 清除搜索框
    removes () {
      this.page = {
        directoryName: ''
      }
      this.ToobtainList()
    },
    async ok () {
      if (this.title === '新增目录') {
        await add(this.formValidate).then(() => {
          this.$message.success('操作成功')
          this.formValidate = {}
          this.ToobtainList()
        })
      } else {
        await update(this.formValidate).then(() => {
          this.$Message.success('修改成功')
          this.formValidate = {}
          this.ToobtainList()
        })
      }
    },
    //  点击取消关闭弹层, 清除表单验证
    cancel () {
      this.formValidate = {
        subjectID: '',
        directoryName: ''
      }
      this.modal1 = false
      this.$refs.formValidate.resetFields()
    },
    //  跳转
    Returntodiscipline () {
      this.$router.push({
        path: '/subjects/list',
        query: {
          id: this.id
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
